<template>
    <div class="flex">
        <div
            class="px-2 mx-2 text-xs flex items-center"
        >{{ pallets.ShowingPallet[showingPalletIndex].name }}</div>
        <Swipe
            lazy-render
            :show-indicators="false"
            ref="swipe"
            :touchable="!dropFill"
            :duration="300"
            class="rounded-full bg-gray-800 shadow-inner shadow-gray-900 px-1 flex-none w-60"
            @change="changePallet"
        >
            <SwipeItem
                class="flex flex-row items-center h-8 justify-evenly"
                v-for="colors in pallets.ShowingPallet"
            >
                <ColorRound
                    v-for="(color, index) in colors.colors"
                    press
                    :color="color"
                    @long-press="startDragFill"
                    @click="selectColor(color, index)"
                ></ColorRound>
            </SwipeItem>
        </Swipe>
        <teleport to="body">
            <div
                v-if="dropFill"
                ref="dragHandle"
                class="fixed pointer-events-none scale-150 -translate-y-1/2 -translate-x-1/2"
                :style="{
                    top: y + 'px',
                    left: x + 'px'
                }"
            >
                <ColorRound :color="dragFillColor" :press="false"></ColorRound>
            </div>
        </teleport>
    </div>
</template>



<script lang="ts" setup>
import { Swipe, SwipeItem, Toast } from 'vant';
import { useColorStore } from '../store/Color'
import { ref } from 'vue'
import ColorRound from './ColorRound.vue'

import { useMouse } from '@vueuse/core'
import { hub } from '../canvas/hub';
import { useColorPanelStore } from '../ColorPanel/store';
const { x, y } = useMouse()
const dragHandle = ref<HTMLElement | null>(null)


const store = useColorStore()
const pallets = useColorPanelStore()

const showingPalletIndex = ref(0)
const changePallet = (index: number) => {
    showingPalletIndex.value = index
}

/** 打开这个颜色的面板 */
const selectColor = (color: string, colorIndex: number) => {

    if (store.selectedColor === color) {
        //第二次点击的时候打开编辑面板
        pallets.opened = true
        pallets.editPallet(pallets.usingPallet!)
        pallets.selectingColorIndex = colorIndex
        pallets.resetColor()
    } else {
        pallets.usingPallet = pallets.ShowingPallet[showingPalletIndex.value]
        store.changeColor(color)
    }

}

//! 下面为拖拽取色的一些操作
const dropFill = ref(false)
const dragFillColor = ref('#ffffff')
const startDragFill = (color: string,) => {
    dragFillColor.value = color;
    dropFill.value = true
    /** Canvas 给予的绘制函数 */
    let pointerupListener: Function
    /** 事件结束操作 */
    const stop = () => {
        dropFill.value = false
        if (pointerupListener) {
            pointerupListener({ x: x.value, y: y.value })
        } else {
            Toast({ message: '颜色填充取消', position: 'bottom', duration: 500 });
        }
        document.body.removeEventListener('mouseup', stop)
        document.body.removeEventListener('touchend', stop)
    }
    store.changeColor(color)
    document.body.addEventListener('mouseup', stop)
    document.body.addEventListener('touchend', stop)
    hub.emit('DropColorFill', (forceStop: Function) => {
        pointerupListener = forceStop
        console.log('拖拽填充 => 获取到回调函数');
    })
}

</script>